<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
</head>
<body>
    <div id="maindiv" class="maindiv mainPadding" style="display: none;">    
        <el-breadcrumb separator="/" class="elBreadcrumb marginB20" v-if="isElBreadcrumb">
            <el-breadcrumb-item>Home</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
            <el-breadcrumb-item>电销业绩排名</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="marginB20">
            <el-button type="primary" @click="searchMonth">月累计排名</el-button>
            <el-button type="success" @click="searchYear">年累计排名</el-button>
            <el-button type="warning" @click="searchMonthAverage">年累计月均排名</el-button> 
            <!-- <shiro:hasPermission name="statistics:trafficCallResource:export"> -->
            <el-button type="danger" @click="exportRs">导出Excel报表</el-button>   
            <!-- </shiro:hasPermission> -->
        </el-row>
        <div class="mainSearchBg">        
            <div class="mainSearchFormBox">
                <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form">
                    <el-form-item label="地区：">
                        <el-select v-model="form.area" placeholder="全部" style="width: 100%;" clearable filterable @change="curDepart">
                            <el-option
                                v-for="item in areaArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="事业部：">  
                        <el-select v-model="form.teleDeptId" placeholder="全部" style="width: 100%;" clearable filterable @change="curTelGroupSale">
                            <el-option
                                v-for="item in deptList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电销组：">  
                        <el-select v-model="form.teleGroupId" placeholder="全部" style="width: 100%;" clearable @change="curTelSale" filterable>
                            <el-option
                                v-for="item in orgTeleArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电销顾问：">  
                      <el-select v-model="form.teleSaleId" placeholder="全部" style="width: 100%;" filterable clearable>
                          <el-option
                              v-for="item in busSaleArr"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                          </el-option>
                      </el-select>
                    </el-form-item>
                    <div class="mainSearchBtnBox">
                        <el-button class="searchBtn" icon="el-icon-search" type="primary" @click="searchTable(1)" :disabled="loading">搜索</el-button>
                    </div>  
                </el-form>
            </div>
            <el-row>
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="事业部排名" name="first" v-if="isShowDept"></el-tab-pane>
                    <el-tab-pane label="电销组排名" name="second" v-if="isShowOrg"></el-tab-pane>
                    <el-tab-pane label="电销顾问排名" name="third"></el-tab-pane>
                </el-tabs>
                <el-table 
                    ref="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    :data="tableData"
                    v-loading="loading"
                    :cell-style="centerStyle"
                    :header-cell-style="centerStyle">
                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                    <el-table-column prop="businessLineRank" label="全国排名">
                        <template slot-scope="scope">
                            <div v-if="scope.row.businessLineRank == 1||scope.row.businessLineRank == 2||scope.row.businessLineRank == 3">
                                <img src="/images/icon_ranking_champion.png" alt="" style="width: 24px;height: 24px;vertical-align: bottom;">
                                {{scope.row.businessLineRank}}
                            </div>
                            <span v-else>{{scope.row.businessLineRank}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="centerRank" label="区内排名">
                        <template slot-scope="scope">
                            <div v-if="scope.row.centerRank == 1||scope.row.centerRank == 2||scope.row.centerRank == 3">
                                <img src="/images/icon_ranking_champion.png" alt="" style="width: 24px;height: 24px;vertical-align: bottom;">
                                {{scope.row.centerRank}}
                            </div>
                            <span v-else>{{scope.row.centerRank}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="groupRank" label="组内排名">
                        <template slot-scope="scope">
                            <div v-if="scope.row.groupRank == 1||scope.row.groupRank == 2||scope.row.groupRank == 3">
                                <img src="/images/icon_ranking_champion.png" alt="" style="width: 24px;height: 24px;vertical-align: bottom;">
                                {{scope.row.groupRank}}
                            </div>
                            <span v-else>{{scope.row.groupRank}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="teleName" label="电销顾问">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.id == curUserId">
                                {{scope.row.teleName}}
                            </el-button>
                            <span v-else>{{scope.row.teleName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="groupName" label="电销组"></el-table-column>
                    <el-table-column prop="departName" label="事业部"></el-table-column>
                    <el-table-column prop="companyName" label="分公司"></el-table-column>
                    <el-table-column prop="centerName" label="地区"></el-table-column>
                </el-table>
                <!--<table-pagination :pager="pager" @change="searchTable()"></table-pagination>-->
            </el-row>
        </div>
    </div>
    <!-- import common js-->
    <div th:include="_footer_include :: #jsLib"></div>
</body>
<div th:include="_footer_include :: #jsLib"></div>
<script  th:inline="javascript">

    var curUserId=[[${curUserId}]];
    var rolecode=[[${roleCode}]];//DXZJL,DXFZ,  DXZJ,DXCYGW
    var areaList=[[${areaList}]];// 地区
    var deptList=[[${deptList}]];// 事业部
    var teleGroupList = [[${teleGroupList}]];// 电销组
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                isElBreadcrumb:true,
                activeName: 'third',
                loading: false,
                isShowDept: false,
                isShowOrg: false,
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 30,
                },
                form: {
                    area:'',
                    teleDeptId: '',
                    teleGroupId: '',
                    teleSaleId: '',
                    type: 1
                },
                export: {
                    area:'',
                    teleDeptId: '',
                    teleGroupId: '',
                    teleSaleId: '',
                    type: 1
                },
                tableData: [],
                areaArr: areaList,
                deptList: '',
                orgTeleArr:'', // 电销组
                busSaleArr: '', // 电销顾问
                curUserId: curUserId
            }             
        },
        methods: {    
            handleClick(tab, event) {
                // tab.index
                if(tab.name=='first'){
                	window.location.href="/ranking/deptList";
                }else if (tab.name == 'second'){
                	window.location.href="/ranking/groupList";
                }else if (tab.name == 'third'){
                    window.location.href="/ranking/managerList";
                }
            },  
            centerStyle(){
                return "text-align:center"
            },
            curDepart(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleDeptId = '';
                this.form.teleGroupId = '';
                this.form.teleSaleId = '';
                this.getDepart(seleVal);
            },
            getDepart(seleVal){
                param={};
                param.id=seleVal;
                param.selectCode='SYB';
                axios.post('/base/getDwOrgList',param).then(function (response) {
                    mainDivVM.deptList=response.data.data;
                }).catch(function (error) {
                    mainDivVM.$message({
                        message: "查询事业部请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            curTelSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleSaleId = '';
                this.getTelSale(seleVal);
            },
            curTelGroupSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleGroupId = '';
                this.form.teleSaleId = '';
                this.getTelGroupSale(seleVal);
            },
            getTelGroupSale(seleVal){
                param={};
                param.id=seleVal;
                param.selectCode='DXZ';
                axios.post('/base/getDwOrgList',param).then(function (response) {
                    mainDivVM.orgTeleArr=response.data.data;
                }).catch(function (error) {
                        mainDivVM.$message({
                        message: "电销组请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            getTelSale(seleVal){
                param={};
                param.orgId=seleVal;
                param.roleCode="DXCYGW";
                axios.post('/base/getSaleList' ,param).then(function (response) {
                    mainDivVM.busSaleArr=response.data.data;
                }).catch(function (error) {
                        mainDivVM.$message({
                        message: "电销顾问请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            searchTable(firstPage) { 
                var param = {};
                param.pageSize = this.pager.pageSize;
    
                if(firstPage){
                    param.pageNum = firstPage;
                }else{
                    param.pageNum = this.pager.currentPage;
                }
                param.centerId = this.form.area;
                param.departId = this.form.teleDeptId;
                param.groupId = this.form.teleGroupId;
                param.userId = this.form.teleSaleId;
                param.type = this.form.type;
                //查询参数 1 事业部排名  2 电销组排名 3 电销顾问排名
                param.selectType = "3";
                this.loading = true; 
                axios.post('/ranking/getPerformanceRankPage',param).then(function (response) {
                    if(!response || !response.data){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        return ;
                    }
                    var resobj= response.data;
                    if(resobj.code != '0'){
                        mainDivVM.loading = false;
                        mainDivVM.$message({
                            message: resobj.msg,
                            type: 'error'
                        });
                        return ;
                    }else if(resobj.data){   
                        var tableData = resobj.data;
                        mainDivVM.tableData = tableData.data;
                        mainDivVM.pager.currentPage = tableData.currentPage;
                        mainDivVM.pager.total = tableData.total;
                        mainDivVM.loading = false;
                        mainDivVM.export.area = mainDivVM.form.area;
                        mainDivVM.export.teleDeptId = mainDivVM.form.teleDeptId;
                        mainDivVM.export.teleGroupId = mainDivVM.form.teleGroupId;
                        mainDivVM.export.teleSaleId = mainDivVM.form.teleSaleId;
                        mainDivVM.export.type = mainDivVM.form.type;
                    }else{
                        mainDivVM.loading = false;
                    }
                }).catch(function (error) {
                    mainDivVM.loading = false;
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            limitTime (start, end) {
                var endTime = this.minuteFormat (end);
                var startTime = this.minuteFormat (start);
                var date = new Date();
                data = this.minuteFormat (date);// 现在的时间
                data = data.slice(0,8);
                if(startTime){
                    var s = startTime.slice(0,8);
                    if(s < data){
                        this.form.startTime = moment(start).format("YYYY-MM-DD 00:00");
                        return this.form.startTime;
                    }
                    return start;
                }
                if(endTime){
                    var e = endTime.slice(0,8);
                    if(e < data){
                        this.form.endTime = moment(end).format("YYYY-MM-DD 23:59");
                        return this.form.endTime;                        
                    }
                    return end;
                }
            },
            percentFormat(row, column) { //百分比格式化
                var percent = row[column.property];
                if (!percent) { // 如果没有值或值为0
                    return "0%";
                }
                percent = (percent * 1000) / 10 + "%";
                return percent;
            },
            minuteFormat (m) {
                if (!m) {return "";}
                var timeStr = new Date(m);
                var yearRes = timeStr.getFullYear()
                var monthRea = timeStr.getMonth()+1;
                monthRea = monthRea < 10 ?  "0" + monthRea : monthRea;
                var dateRes = timeStr.getDate();
                dateRes = dateRes < 10 ?  "0" + dateRes : dateRes;  
                var hoursRes = timeStr.getHours();
                hoursRes = hoursRes < 10 ?  "0" + hoursRes : hoursRes;  
                var minRes = timeStr.getMinutes();
                minRes = minRes < 10 ?  "0" + minRes : minRes;                
                var timeRes = "" + yearRes + monthRea + dateRes + hoursRes + minRes;
                return timeRes;
            },
            searchMonth(){ // 月
                this.form.type = 1
                this.searchTable(1,1);
            },
            searchYear(){ // 年
                this.form.type = 2
               this.searchTable(1,2);
            },
            searchMonthAverage(){ // 年累计月均排名
               this.form.type = 3
               this.searchTable(1,3);
            },
            exportRs(){
                var param = {};
                param.centerId = this.form.area;
                param.departId = this.form.teleDeptId;
                param.groupId = this.form.teleGroupId;
                param.userId = this.export.teleSaleId;
                param.type = this.export.type;
                param.selectType = "3";
                axios.post('/ranking/exportPerformanceRankList',param,{responseType:'blob'})
                .then(function (response) {
                    var data =  response.data;
                    var fileName = response.headers.filename;
                    saveAs(data,decodeURI(fileName));
                })
                .catch(function (error) {
                    mainDivVM.$message({
                        message: "导出失败，请稍后重试",
                        type: "error"
                    });
                });
            }
        },
	created(){
        if(rolecode=='DXCYGW' || rolecode=='DXZJ'){
            this.isShowDept = false;
        }else{
            this.isShowDept = true;
        }
        if(rolecode=='DXCYGW'){
            this.isShowOrg = false;
        }else{
            this.isShowOrg = true;
        }
		this.searchTable();
        // 判断是否显示面包屑
        var type=getQueryString("type");
        console.log(type)
        if(type=="1"){
            // 隐藏面包屑
            this.isElBreadcrumb=false;                
        }
	},
	mounted(){
        document.getElementById('maindiv').style.display = 'block';
    }
});
</script>
</body>
</html>